<template>
	<view style="min-height: 100vh;position: relative;background-color: #f2f2f2;">
		<u-navbar title='整改结果'  left-icon-color="white" :titleStyle="{'color':'white'}" bgColor="#13989a" :autoBack="true" 
			:placeholder="true"></u-navbar>
		<view class="container">
			<view class="floor " v-if="recordDetailsObj">
				<view class="uni-margin-wrap" v-if="problemImgArr.length">
					<swiper class="swiper" circular :indicator-dots="true" :autoplay="true"
						:interval="2000" :duration="500">
						<swiper-item v-for="(url,i) in problemImgArr" :key="i">
							<image :src="'http://'+url" mode="" style="width: 100%;height: 300rpx;" @click="viewImage(url,problemImgArr)"></image>
						</swiper-item>
					</swiper>
				</view>
			
				<view class="form flex" style="justify-content: space-between;font-size: 28rpx;">
					<view >
						<text class="lable">问题：</text>
						<text class="value">{{recordDetailsObj.problemName}}</text>
					</view>
					<view style="width: 120rpx;" >
						<u-tag :text="`-${recordDetailsObj.problemScore}.0分`" size="mini"></u-tag>
					</view>
				</view>
				<view class="form" style="font-size: 28rpx;">
					<text class="lable">整改意见：</text>
					<text class="value" v-if="recordDetailsObj.correctionRemark">{{recordDetailsObj.correctionRemark}}</text>
				</view>
				<view>
				</view>
			</view>
			<view class="floor">
				<view class="title" style="margin-top: 20rpx;">
					整改图片
				</view>
				<upload name="overImage" @uploadFile="uploadImge" v-if="load">

				</upload>
			</view>
			<view class="floor">
				<view class="title">
					整改意见
				</view>
				<u--textarea v-model="correctionRemark" :count='true' placeholder="请输入整改意见"></u--textarea>
			</view>

		</view>
		<view class="footer">
			<view style="background-color: #fff;padding: 10rpx 20rpx;">
				<u-button shape="circle" color='#13989a' @click="subit">整改</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import upload from "@/components/upload/upload.vue"
	export default {
		data() {
			return {
				remark: '',
				recordDetailsId: 0,
				correctionImg: [],
				correctionRemark: '',
				recordDetailsIdList: [],
				problemImgArr:[],
				load: true,
				recordDetailsIndex:0,
				recordDetailsObj:{}
			}
		},
		components: {
			upload
		},
		onLoad(option) {
			if (option.recordDetailsId) {
				this.recordDetailsId = option.recordDetailsId
			}
			let app = getApp();
			this.recordDetailsIdList = app.recordDetailsIdList
			let recordDetailsIndex=this.recordDetailsIdList.findIndex(item=>{
				if(item.recordDetailsId==this.recordDetailsId){
					return true
				}
				
			})
			console.log(recordDetailsIndex)
			if(recordDetailsIndex>=0){
				this.recordDetailsIndex=recordDetailsIndex
				this.recordDetailsObj=this.recordDetailsIdList[this.recordDetailsIndex]
				this.problemImgArr=this.recordDetailsObj.correctionImg?this.recordDetailsObj.correctionImg.split(','):[]
			}
		},
		onShow() {

		},
		methods: {
			viewImage(listIndex,list) {
				let imageList= list.map(item=>'http://'+item)
				uni.previewImage({
					current: listIndex,
					urls: imageList,
					longPressActions: {
						itemList: ['保存图片'],
						success: data => {
							uni.closePreviewImage()
							/* 保存图片到系统相册 */
							if (data.tapIndex == 0) {
								uni.getImageInfo({
									src: imageList[listIndex],
									success: function(res) {
										console.log(res)
										uni.saveImageToPhotosAlbum({ //保存图片到系统相册。
											filePath: res.path, //图片文件路径
											success: function() {
												uni.showToast({
													title: '图片保存成功',
													icon: 'none',
												});
											},
											fail: function(e) {
												console.log(e);
												uni.showToast({
													title: '图片保存失败',
													icon: 'none',
												});
											},
										});
									},
									fail: function(e) {
										console.log(e);
										uni.closePreviewImage()
										uni.showToast({
											title: '图片保存失败',
											icon: 'none',
										});
									},
								})
							}
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			uploadImge(msg) {
				this.correctionImg = msg.files
			},
			subit() {
				uni.$u.http.post('/patrol/addPatrolRecordDetailsCorrection', {
					recordDetailsId: this.recordDetailsId,
					correctionImg: this.correctionImg.join(','),
					correctionRemark: this.correctionRemark
				}).then(res => {
					if (res) {
						// 审核完成 -删除当前项，
						this.recordDetailsIdList.splice(this.recordDetailsIndex, 1)
						if (this.recordDetailsIdList.length) {
							uni.showModal({
								title: '提交完成',
								content: '整改下一条问题？',
								success: (res) => {
									if (res.confirm) {
										this.recordDetailsId = this.recordDetailsIdList[0].recordDetailsId
										this.correctionImg = []
										this.recordDetailsIndex=0
										this.recordDetailsObj=this.recordDetailsIdList[this.recordDetailsIndex]
										this.problemImgArr=this.recordDetailsObj.correctionImg?this.recordDetailsObj.correctionImg.split(','):[]
										this.correctionRemark = ''
										this.load = false
										setTimeout(() => {
											this.load = true
										}, 500)
									} else if (res.cancel) {
										uni.navigateBack({
											delta: 2
										})
									}

								}
							})
						}else{
							uni.showToast({
								title: '操作成功',
								duration: 1000,
								mask: true,
								complete: () => {
									setTimeout(() => {
										uni.navigateBack({
											delta: 2
										})
									}, 1000)
								}
							});
						}

						// uni.showToast({
						// 	title: '提交成功',
						// 	duration: 1000,
						// 	mask: true,
						// 	complete: () => {
						// 		setTimeout(() => {
						// 			uni.navigateBack({
						// 				delta: 1
						// 			})
						// 		}, 1000)
						// 	}
						// });
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 150rpx;
		background-color: #ffffff;
	}

	.container {
		width: 92vw;
		padding: 30rpx;
		z-index: 10;
		position: absolute;
		top: 176rpx;
		overflow: hidden;
		border-radius: 20rpx;
	}

	.workerSearch {
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		padding-left: 22rpx;
		width: 100%rpx;
		height: 60rpx;
		background-color: #e6e6e6;
		opacity: 0.9;
		margin: 10rpx 0;
	}

	.floor {
		background-color: #fff;
		border-radius: 10rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;

		.adress {
			font-size: 26rpx;
		}

		.title {
			font-weight: 600;
			font-size: 30rpx;
		}
	}
</style>